<template>
  <div class="container">
    <el-row style="margin-top: 10px;" :gutter="20">
      <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="bg">
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <span style="color: #97a8be;">总答题数量</span>
            <el-tooltip class="item" effect="dark" content="指标说明" placement="top">
              <i style="color: #97a8be; font-size: 18px;" class="el-icon-warning" />
            </el-tooltip>
          </div>
          <div style="margin-left: 20px;margin-top: 60px; height: 120px; font-size: 40px;">260,560
          </div>
          <div style="border-bottom: 1px solid #e8e8e8; padding-bottom: 8px; padding-right: 20px; display: flex;justify-content: space-between;">
            <span>周同比12%
              <i style="color: red;" class="el-icon-caret-top" />
            </span>
            <span>日环比11%
              <i
                class="el-icon-caret-bottom"
                style="color: green;"
              />
            </span>
          </div>
          <div style="margin-top: 25px;">日答题数量
            <span style="margin-left: 20px;">12,423</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="bg">
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <span style="color: #97a8be;">试题方向</span>
            <el-tooltip class="item" effect="dark" content="指标说明" placement="top">
              <i style="color: #97a8be; font-size: 18px;" class="el-icon-warning" />
            </el-tooltip>
          </div>
          <div ref="one" style=" margin-top: 20px; height: 160px;" />
          <div style="margin-top: 25px; border-top: 1px solid #e8e8e8; padding-top: 25px;">日答题数量
            <span style="margin-left: 20px;">10,234</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="bg">
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <span style="color: #97a8be;">试题学科分布</span>
            <el-tooltip class="item" effect="dark" content="指标说明" placement="top">
              <i style="color: #97a8be; font-size: 18px;" class="el-icon-warning" />
            </el-tooltip>
          </div>
          <div ref="two" style=" margin-top: 20px; height: 160px;" />
          <div style="margin-top: 25px; border-top: 1px solid #e8e8e8; padding-top: 25px;">日答题数量
            <span style="margin-left: 20px;">5,234</span>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
        <div class="bg">
          <div style="display: flex;align-items: center;justify-content: space-between;">
            <span style="color: #97a8be;">上周试题新增</span>
            <el-tooltip class="item" effect="dark" content="指标说明" placement="top">
              <i style="color: #97a8be; font-size: 18px;" class="el-icon-warning" />
            </el-tooltip>
          </div>
          <div ref="three" style=" margin-top: 20px;  height: 160px;" />
          <div style="margin-top: 25px; border-top: 1px solid #e8e8e8; padding-top: 25px;">日答题数量
            <span style="margin-left: 20px;">12,34</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row style="background-color: #fff; position: relative;  margin-top: 20px; padding:20px 15px; padding-bottom: 0px; margin-left: 3px; margin-right: 2px; ">
      <el-tabs v-model="activeName" style="width: 100%;" @tab-click="handleClick">
        <el-tab-pane style="width:100%" label="前端学科" name="first">
          <!-- <el-row style="margin-top: 10px; width: 100%;" :gutter="20">
            <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="1">
              <div ref="four" style=" height: 400px; width:100%;" />

            </el-col>
            <el-col style="background-color: green;" :xs="24" :sm="6" :md="6" :lg="6" :xl="11">2536</el-col>
          </el-row> -->
        </el-tab-pane>
        <el-tab-pane label="JAVA学科" name="second">
          <!-- <el-row style="margin-top: 10px; width: 100%;" :gutter="20">
            <el-col style="" :xs="24" :sm="18" :md="18" :lg="18" :xl="1">
              <div ref="five" style=" height: 400px; width:100%; " />
            </el-col>
            <el-col style="background-color: green;" :xs="24" :sm="6" :md="6" :lg="6" :xl="11">2536</el-col>
          </el-row> -->
        </el-tab-pane>
      </el-tabs>
      <div style="position: absolute; top:20px;right:20px;color: #a69999; font-size: 18px;">前端与java学科试题走势图</div>
      <el-row style=" background-color: #fff; width: 100%; height: 500px; padding:20px 15px; padding-top: 0px; margin-left: 3px; margin-right: 2px;" :gutter="20">
        <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="17">
          <div ref="four" style="  height: 400px; width: 100%;" />
        </el-col>
        <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="7">
          <h3 style="font-weight: normal;">学科试题数量排名</h3>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #495c6d; text-align: center;border-radius: 11px; color: white; padding: 1px; font-size: 16px;">1</div>
              </span>
              <span style="flex: 8">前端</span>
              <span style="flex: 5">5,234</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #495c6d; text-align: center;border-radius: 11px; color: white; padding: 1px; font-size: 16px;">2</div>
              </span>
              <span style="flex: 8">java</span>
              <span style="flex: 5">3,210</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #495c6d; text-align: center;border-radius: 11px; color: white; padding: 1px; font-size: 16px;">3</div>
              </span>
              <span style="flex: 8">大数据</span>
              <span style="flex: 5">1,294</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #f5f5f5; text-align: center;border-radius: 11px;  padding: 2px; font-size: 16px;">4</div>
              </span>
              <span style="flex: 8">C++</span>
              <span style="flex: 5">1,001</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #f5f5f5; text-align: center;border-radius: 11px;  padding: 2px; font-size: 16px;">5</div>
              </span>
              <span style="flex: 8">UI</span>
              <span style="flex: 5">934</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #f5f5f5; text-align: center;border-radius: 11px;  padding: 2px; font-size: 16px;">6</div>
              </span>
              <span style="flex: 8">php</span>
              <span style="flex: 5">856</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #f5f5f5; text-align: center;border-radius: 11px;  padding: 2px; font-size: 16px;">7</div>
              </span>
              <span style="flex: 8">python</span>
              <span style="flex: 5">403</span>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px;">
            <el-col style="display: flex; justify-content: space-between; font-size: 19px;">
              <span style="flex : 3;">
                <div style="width: 22px; height: 22px;line-height: 22px; background-color: #f5f5f5; text-align: center;border-radius: 11px;  padding: 2px; font-size: 16px;">8</div>
              </span>
              <span style="flex: 8">测试</span>
              <span style="flex: 5">122</span>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-row>

  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {

  data() {
    return {
      activeName: 'first',
      data: [100, 120, 161, 134, 105, 160, 165, 100, 120, 161, 134, 105]
    }
  },
  mounted() {
    const myChart = echarts.init(this.$refs.one)
    myChart.setOption({
    radar: [
      {
        indicator: [
          { text: '逻辑思维', max: 100 },
          { text: '高阶技术', max: 100 },
          { text: '理论基础', max: 100 },
          { text: '基础知识', max: 100 },
          { text: '项目相关', max: 100 }
        ],
        splitArea: {
          areaStyle: {
            color: ['#c9c0cb', '#c9c0cb', '#c9c0cb', '#c9c0cb', '#c9c0cb']
          }
        },
        radius: 60,
        center: ['50%', '60%']
      }
    ],
    series: [
      {
        type: 'radar',
        areaStyle: {
          color: '#2ec7c9',
          normal: {
            width: 1,
            opacity: 1
          }
        },
        data: [
          {
            value: [70, 80, 60, 60, 80],
            itemStyle: {
              normal: {
                opacity: 0
              }
            },
            lineStyle: {
            color: '#2ec7c9'
          },
            areaStyle: {
              color: '#2ec7c9'
            }
          }
        ]
      }
    ]
    })
    window.onresize = function () {
       myChart.resize()
    }
    const myChart1 = echarts.init(this.$refs.two)
    myChart1.setOption({

    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
      left: 'center',
      top: 'bottom',
      data: [
        'rose1',
        'rose2',
        'rose3',
        'rose4',
        'rose5'
      ]
    },

    color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
    series: [
      {
        name: '学科分布',
        type: 'pie',
        radius: [20, 60],
        center: ['53%', '50%'],
        roseType: 'angle',

        data: [
          { value: 320, name: '前端' },
          { value: 240, name: 'java' },
          { value: 149, name: 'python' },
          { value: 100, name: 'c++' },
          { value: 59, name: 'UI' }
        ]
      }
    ]
    })
    window.onresize = function () {
       myChart1.resize()
    }
    const myChart2 = echarts.init(this.$refs.three)
    myChart2.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      height: '160px',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
        show: true,
        lineStyle: {
          color: '#3ba5d9'
        }
      },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
        textStyle: {
          color: '#3ba5d9'
        }
      }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLine: {
        show: true,
        lineStyle: {
          color: '#3ba5d9'
        }
      },
        splitArea: {
        show: true,
        areaStyle: {
          color: ['#fefefe', '#f9f9f9']
        }
      },
      axisLabel: {
        textStyle: {
          color: '#3ba5d9'
        }
      }
      }
    ],
    series: [
      {
        name: '单选题',
        type: 'bar',
        stack: 'Ad',
        data: [70, 52, 200, 334, 90, 390, 220],
        itemStyle: {
          normal: { color: '#2ec7c9' }
        }
      },
      {
        name: '多选题',
        type: 'bar',
        stack: 'Ad',
        data: [80, 52, 200, 334, 290, 390, 220],
        itemStyle: {
          normal: { color: '#b6a2de' }
        }
      },
      {
        name: '简答题',
        type: 'bar',
        stack: 'Ad',
        data: [30, 52, 200, 334, 190, 390, 220],
        itemStyle: {
          normal: { color: '#5ab1ef' }
        }
      }
    ]
  })
    window.onresize = function () {
        myChart2.resize()
      }
    const myChart3 = echarts.init(this.$refs.four)
    myChart3.setOption({
      grid: {
        x: '0%',
        containLabel: true
    },
          tooltip: {
            backgroundColor: 'rgba(0,0,0,0.3)',
        borderColor: 'rgba(0,0,0,0.3)',
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            background: '#6a7985'
        }
      },
      formatter: function(params) {
                var res = params[0].axisValue + '<br>' + '<div style="display:inline-block; width:10px; height:10px; background:blue;border-radius: 5px; margin-right:3px;"></div>' + '试题数量:' + params[0].data
                  return res
                }

    },
      xAxis: {
        boundaryGap: false,
        axisLine: {
            show: true,
            lineStyle: {
              color: '#008acd'
            }},
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
              color: '#3ba5d9'
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
              color: ['#fefefe', '#f9f9f9']
            }
        }
      },
      series: [
        {
          data: this.data,
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#6ca7fa'
          }

        }
      ]
        })
        window.onresize = function () {
          myChart3.resize()
    }
  },
  updated() {
    const myChart3 = echarts.init(this.$refs.four)
    myChart3.setOption({
      grid: {
        x: '0%',
        containLabel: true
    },
      tooltip: {
      backgroundColor: 'rgba(0,0,0,0.3)',
        borderColor: 'rgba(0,0,0,0.3)',
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            background: '#6a7985'
        }
      },
      formatter: function(params) {
                var res = params[0].axisValue + '<br>' + '<div style="display:inline-block; width:10px; height:10px; background:blue;border-radius: 5px; margin-right:3px;"></div>' + '试题数量:' + params[0].data
                  return res
                }

    },
      xAxis: {
        boundaryGap: false,
        axisLine: {
            show: true,
            lineStyle: {
              color: '#008acd'
            }},
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
      },
      yAxis: {
        type: 'value',
        axisLine: {
            show: true,
            lineStyle: {
              color: '#3ba5d9'
          }
        },
        splitArea: {
          show: true,
          areaStyle: {
              color: ['#fefefe', '#f9f9f9']
            }
        }
      },
      series: [
        {
          data: this.data,
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#6ca7fa'
          }

        }
      ]
        })
        window.onresize = function () {
          myChart3.resize()
    }
  },
  methods: {
    handleClick(tab, event) {
      if (tab.paneName === 'first') {
        this.data = [100, 120, 161, 134, 105, 160, 165, 100, 120, 161, 134, 105]
      } else if (
        tab.paneName === 'second'
      ) {
        this.data = [200, 192, 120, 144, 160, 130, 140, 105, 160, 165, 100, 120]
      }
      // this.$nextTick(function () {
      //   var myEvent = new Event('resize')
      //   window.dispatchEvent(myEvent)
      // })
      }
    }

}
</script>
<style scoped>
.bg{
  min-width: 100px;
  padding: 10px 30px;
  height: 300px;
  background-color: #fff;
}
</style>

